<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4列表排序</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>人员信息</h1>
    <input type="text" placeholder="请输入查找对象" v-model="keyWord">
    <button @click="sortType=1">年龄升序</button><!--computed计算属性-->
    <button @click="sortType=2">年龄降序</button>
    <button @click="sortType=0">原顺序</button>

    <ul>
        <li v-for="(p,index) in filPersons" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>
</div>

</body>
<script type="text/javascript">
    Vue.config.productionTip=false
    //computed来实现
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            sortType:0,//原顺序
            persons:[
                {id:'001',name:'马冬梅',age:22,sex:'nv'},
                {id:'002',name:'周冬雨',age:14,sex:'nv'},
                {id:'003',name:'周杰伦',age:36,sex:'nan'},
                {id:'004',name:'温兆伦',age:17,sex:'nan'}
            ],
        },
        computed:{
            filPersons(){
                const arr=this.persons.filter((p)=>{//过滤
                    return p.name.indexOf(this.keyWord)!==-1
                })
                if (this.sortType){
                    arr.sort((a,b)=>{
                        return this.sortType===1?a.age-b.age:b.age-a.age
                    })
                }
                return arr
            }
        }
    })
// let arr =[1,3,2,4,6,5]
//     arr.sort((a,b)=>{
//         return b-a
//     })
//     console.log(arr)//排序
</script>
</html>